<template>
<div>
    
    <el-button type="primary" @click="addsupplier">添加</el-button>
    <el-input placeholder="请输入内容" v-model="mag"></el-input>
    <el-button type="primary" @click="getkey">查询</el-button>
    <template>
    <el-table
      :data="suppliers"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="手机号">
      </el-table-column>
      <el-table-column
        label="货品">
        <template slot-scope="scope">
             <el-button type="primary" @click="dialogTableVisible = true; getsuppliergoods(scope.row._id)">查看货品</el-button>
        </template>      
      </el-table-column>
       <el-table-column  label="操作">
             <template slot-scope="scope">
             <el-button type="primary" icon="el-icon-edit" 
             circle @click="uploadsupplier(scope.row._id)"></el-button>
             <el-button type="danger" icon="el-icon-delete" 
             circle @click="SupplierDelete(scope.row._id)"></el-button>
             </template>       
     </el-table-column>
    </el-table>
  </template>

  <!-- 分页 -->
   <el-pagination
           background
           layout="prev, pager, next"
           :total="total"
           :page-size="condition.limit"
           :current-page="condition.page"
           @current-change="currentPage"
           >
    </el-pagination>  
</div>
</template>

<script>
export default {
  data() {
    return {
      dialogTableVisible: false,
      addlogTab: false,
      form: {
        nickname: "",
        category: "",
        material: "",
        specifications: "",
        exclusive: "",
        packaging: "",
        taste: "",
        Supplier: "", //存放供货商的id方便添加
        special: "",
        origin: "",
        manufacturedate: "",
        shelflife: "",
        featuresthat: "",
        price: "",
        img: []
      },
      mag:""
    };
  },
  async created() {
    this.$store.commit("suppliers/setCondition", {
      page: 1
    });
    this.$store.dispatch("suppliers/agetSupplier"); //触发
  },
  computed: {
    suppliers() {
      //供应商
      return this.$store.state.suppliers.data;
    },
    total() {
      //总条数
      return this.$store.state.suppliers.total;
    },
    condition() {
      //查询条件
      return this.$store.state.suppliers.condition;
    },
  },
  methods: {
    // 当前页码
    currentPage(newPages) {
      this.$store.commit("suppliers/setCondition", {
        page: newPages
      });
      this.$store.dispatch("suppliers/agetSupplier");
    },
    // 删除
    SupplierDelete(id) {
      this.$confirm("确定要删除该数据吗, 是否继续?", "重要提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$store.dispatch("suppliers/deleteSupplier", id);
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 添加供货商
    addsupplier() {
      this.$router.push({
        name: "添加供应商"
      });
    },
    uploadsupplier(id) {
      this.$router.push({
        name: "修改供应商",
        params: {
          id
        }
      });
    },
    // 文件移除时触发
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    getsuppliergoods(id){
      this.$router.push({
        name: "查看货品",
        params: {
          id
        }
      });
    },
    getkey() {
      let key = this.mag;
      this.$store.commit("suppliers/setCondition", {
        key,
        page: 1
      });
     this.$store.dispatch("suppliers/agetSupplier");
    }
  }
};
</script>

<style scoped>
.el-input {
  width: 300px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
